<template>
  <div :style="`width:${width}px`">
    <a-input-group compact>
      <a-select style="width: 33.33333333333%" v-model="address.province" placeholder="请选择省" @change="getCityData">
        <a-select-option v-for="(item, i) in provinceData" :key="i" :value="item.id">{{ item.name }}
        </a-select-option>
      </a-select>
      <a-select style="width: 33.333333333333%" v-model="address.city" placeholder="请选择市" @change="getAreaData">
        <a-select-option v-for="(item, i) in cityData" :key="i" :value="item.id">{{ item.name }}
        </a-select-option>
      </a-select>
      <a-select style="width: 33.3333333333333%" v-model="address.area" placeholder="请选择区" @change="AreaChange">
        <a-select-option v-for="(item, i) in areaData" :key="i" :value="item.id">{{ item.name }}
        </a-select-option>
      </a-select>
    </a-input-group>
  </div>
</template>
<script>
import { allParentsGet, getChildrenByParentId } from '@/services/store'
export default {
  name: 'AreaSelect',
  components: {
  },
  props: {
    selectedAddress: { // 省市区初始值
      type: Object,
      default: () => {
        return {}
      }
    },
    addressList: { // 省市区对象
      type: Object,
      default: () => {
        return {}
      }
    },

    zIndex: {
      type: Number,
      default: 1
    },
    width: { type: Number, default: 400 },
    right: { type: String, default: '' }
  },
  data () {
    return {
      provinceData: [],
      cityData: [],
      areaData: [],
      regionParams: {
        type: '1',
        parentDictKey: ''
      },
      address: {
        province: this.selectedAddress.province || undefined,
        city: this.selectedAddress.city || undefined,
        area: this.selectedAddress.area || undefined
      },

      addressName: {
        provinceName: '贵州省',
        cityName: '',
        areaName: ''
      },
      initialCity: true
    }
  },
  created () {
    this.getProvinceData()
  },
  methods: {
    open (selectedAddress) {
      this.address = {
        province: selectedAddress.province,
        city: selectedAddress.city,
        area: selectedAddress.area
      }
      this.getProvinceData(1)
    },
    async getProvinceData (data) {
      const res = await allParentsGet()
      const { isSuccess, data: response, msg } = res
      if (isSuccess) {
        this.provinceData = response
        if (this.address.province) {
          this.getCityData(data)
        }
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    },
    AreaChange (data, type) {
      const area = this.areaData.find(ele => {
        return ele.id === this.address.area
      })
      this.addressList.areaList = {
        id: area.id,
        name: area.name
      }
      if (type === 1) {
        this.$emit('changeAreaOpen', this.address, this.addressList)
      } else {
        this.$emit('changeArea', this.address, this.addressList)
      }
    },
    async getCityData (data) {
      if (data && data !== 1) {
        delete this.address.city
        delete this.address.area
        this.areaData = []
      }
      const province = this.provinceData.find(ele => {
        return ele.id === this.address.province
      })
      this.addressList.provinceList = {
        id: province.id,
        name: province.name
      }
      delete this.addressList.cityList
      delete this.addressList.areaList
      if (data && data !== 1) {
        this.$emit('changeArea', this.address, this.addressList)
      }
      const res = await getChildrenByParentId(this.address.province)
      const { isSuccess, data: response, msg } = res
      if (isSuccess) {
        this.cityData = response
        if (this.address.city) {
          this.getAreaData(data)
        }
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    },
    async getAreaData (data) {
      if (data && data !== 1) {
        delete this.address.area
      }

      const city = this.cityData.find(ele => {
        return ele.id === this.address.city
      })
      this.addressList.cityList = {
        id: city.id,
        name: city.name
      }
      delete this.addressList.areaList
      if (data && data !== 1) {
        this.$emit('changeArea', this.address, this.addressList)
      }
      const res = await getChildrenByParentId(this.address.city)
      const { isSuccess, data: response, msg } = res
      if (isSuccess) {
        this.areaData = response
        if (data === 1) {
          this.AreaChange(this.address.area, 1)
        }
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    }

  }
}
</script>
<style lang="less" scoped>
.m-cascader-wrap {
  display: inline-block;
  width: 449px;
  height: 40px;
  line-height: 40px;
}
</style>
